<template>
    <div>
        <h3>添加</h3>
        <table>
            <tr>
                <td>门店名称</td>
                <td><input type="text" v-model="model.shopName"></td>
            </tr>
            <tr>
                <td>门店电话</td>
                <td><input type="text" v-model="model.phone"></td>
            </tr>
            <tr>
                <td>门店地址</td>
                <td><input type="text" v-model="model.adderss"></td>
            </tr>
            <tr>
                <td>是否启用</td>
                <td>
                    <input type="radio" name="use" v-model="model.state" :value="1">是
                    <input type="radio" name="use" v-model="model.state" :value="0">否
                </td>
            </tr>
            <tr>
                <td>门店图片</td>
                <td>
                    <input type="file" @change="changeImg">
                </td>
            </tr>
            <tr>
                <td></td>
                <td><input type="button" value="添加" @click="ok"></td>
            </tr>
        </table>
    </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import { useRoute,useRouter } from 'vue-router';
import axios from 'axios';

const route = useRoute();
const router =useRouter();

let model = reactive({
    "shopName": '',
  "phone": '',
  "adderss":'',
  "photo": '',
  "state": 0,
});
const changeImg =(e:any)=>{
    var obj = e.target.files[0];
    var f = new FormData();
    f.append('file',obj);
    axios({
        url:'https://localhost:7244/api/Shop/UpFiles',
        method:'post',
        data:f
    })
    .then((res)=>{
        console.log(res);
        model.photo = res.data;
    })
    .catch((err)=>{
        console.log(err);
    })
}

const ok=()=>{
    axios({
        url:'https://localhost:7244/api/Shop/ShopAdd',
        method:'post',
        data:model
    })
    .then((res)=>{
        console.log(res);
        if(res.data>0){
            alert('添加成功');
            return;
        }
        else{
            alert('添加失败');
            return;
        }
    })
}
</script>

<style scoped>

</style>